<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import SelectCateAndLab from '../components/category/SelectCateAndLab.vue'
const titleFunction = [
  {
    type: 'text',
    text: 'time',
  },
  {
    type: 'button',
    text: '保存',
    typeButton: 'secondary ',
  },
  {
    type: 'button',
    text: '发布',
    typeButton: '',
  }
]
const editorRef = shallowRef()
const valueHtml = ref('')
const uploadUrl = 'https://www.huohuo90.com:3005/upload'
const fileUrl = ref([])

onMounted(() => {
})
const toolbarConfig = {
  // toolbarKeys: ['bold', 'underline', 'italic', 'through', 'code', 'sub', 'sup', 'clearStyle', 'color', 'bgColor', 'fontSize', 'fontFamily', 'indent', 'delIndent', 'justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify', 'lineHeight', 'insertImage', 'deleteImage', 'editImage', 'viewImageLink', 'imageWidth30', 'imageWidth50', 'imageWidth100', 'divider', 'emotion', 'insertLink', 'editLink', 'unLink', 'viewLink', 'codeBlock', 'blockquote', 'headerSelect', 'header1', 'header2', 'header3', 'header4', 'header5', 'todo', 'redo', 'undo', 'fullScreen', 'enter', 'bulletedList', 'numberedList', 'insertTable', 'deleteTable', 'insertTableRow', 'deleteTableRow', 'insertTableCol', 'deleteTableCol', 'tableHeader', 'tableFullWidth', 'insertVideo', 'uploadVideo', 'editVideoSize', 'uploadImage', 'codeSelectLang']
}
const editorConfig = { placeholder: '请输入内容...' }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}


</script>

<template>
<div class="addArticle">
  <yk-space dir="vertical" :size="12" class="addArticle-top">
    <div class="addArticle-topTitle">
      <top-title title="博客文章" :titleFunction="titleFunction"/>
    </div>
    <Toolbar
      class="article-toolbar"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <yk-space class="article-form" dir="vertical" :size="24" style="width:100%;" align="center">
      <yk-space style="width:100%;">
        <yk-space style="width:100%;" :size="24">
          <yk-space dir="vertical" :size="24" style="width:100%;" align="center">
            <input  placeholder="请输入标题" class="addArticle-title"></input>
            <SelectCateAndLab />
          </yk-space>
          <div class="addArticle-img">
            <yk-upload
              :upload-url="uploadUrl"
              :file-list="fileUrl"
              accept="image/*"
              :limit="1"
              :multiple="false"
            ></yk-upload>
          </div>
          
        </yk-space>
      </yk-space>
      <textarea placeholder="请输入简介" class="addArticle-introduction" cols="115" rows="5"></textarea>
      <Editor
        style="height:100%"
        class="article-editor"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </yk-space> 
  </yk-space>
  

</div>
</template>

<style scoped lang='less'>
.addArticle {
  
  width:1200px;
  margin:0 auto;
  margin-top: 32px;

  .addArticle-top {
    .article-form {
      height: 100%;
      width: 100%;
      background-color: @bg-color-l;
      padding: 40px 190px;
      
      
      .addArticle-introduction {
        resize: none;
        background-color: @bg-color-l;
        border: none;
        border-bottom: 1px solid @gray-6;
        outline: none;
      }

      .addArticle-img {
        :deep(.yk-upload) {
          .yk-upload__picture-button {
            width: 160px;
            height: 120px;
          }

          .yk-upload__picture {

            .yk-upload-picture {
              width: 160px;
              height: 120px;
              right:80px;
            }
          }
            
        }
      }

      .addArticle-title {
        width: 100%;
        font-size: 24px;
        font-weight: 600;
        background-color: @bg-color-l;
        border: none;
        outline: none;

        ::placeholder {
          color: @gray-6;
        }
      }

      

      .article-editor {
        width:100%;
        min-height: 400px;
        :deep(.w-e-text-container) {
          background-color: @bg-color-l;
          
          & [data-slate-editor] {
            padding: 0px;
          }

          .w-e-scroll {
            overflow: hidden !important;
          }

          .w-e-text-placeholder {
            left: 0px;
          }

        }
      }
    }
    .addArticle-topTitle {
      padding: 16px 24px;
      background-color: @bg-color-l;
      width:100%;
      border-radius: 8px;
    }
    .article-toolbar {
      :deep(.w-e-toolbar) {
        border-radius:8px;
        background-color: @bg-color-l;
      }

      :deep(.w-e-bar-divider) {
        background-color: @gray-4;
        height: 20px;
        margin: 10px 5px;
      }
    }

  }
  
}
</style>